<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import Navbar from '@/pages/View/Navbar.vue';
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue';
import ProductList from '@/pages/View/ProductList.vue';
import Calendar from "@/pages/View/Calendar.vue";
import UserList from "@/pages/View/UserList.vue";
import Picture from "@/pages/View/Picture.vue";
import CategoryProductCount from "@/pages/View/CategoryProductCount.vue";
import CategoryUser from "@/pages/View/CategoryUser.vue";

const router = useRouter();
const username = ref(null);
const activeMenuItem = ref('1-1');
const level = ref(0);

onMounted(() => {
  const storedUsername = localStorage.getItem('username');
  if (storedUsername) {
    username.value = storedUsername;
  }
  const storedUserLevel = localStorage.getItem('level');
  console.log("level"+storedUserLevel)
  if (storedUserLevel) {
    level.value = parseInt(storedUserLevel);  // 假设 level 存储为字符串，转换为数字
  }
  const userId = localStorage.getItem('userId');
  if (!userId) {
    alert('用户未登录，请先登录');
    router.push('/login'); // 跳转到登录页面
  }
});
function handleAddProduct() {
  router.push('/addp'); // 跳转到添加商品页面
}
function handleAddUser() {
  router.push('/addu'); // 跳转到添加商品页面
}

// 登出逻辑
function logout() {
  localStorage.removeItem('userToken');
  localStorage.removeItem('username');
  localStorage.removeItem('userId');
  localStorage.removeItem('userLevel');
  alert('已成功登出');
  router.push('/login');
}
function self() {
  const userId = localStorage.getItem('userId'); // 从 localStorage 获取 userId
  if (userId) {
    router.push({ path: '/self', query: { id: userId } }); // 跳转时传递 userId
  } else {
    alert('用户未登录，请先登录');
    router.push('/login'); // 跳转到登录页面
  }
}

// 处理菜单点击事件
function handleMenuItemClick(index) {
  console.log('菜单项被点击:', index);
  activeMenuItem.value = index;
}
</script>

<template>
  <!-- 导航栏组件 -->
  <Navbar />

  <!-- 主容器 -->
  <el-container class="layout-container-demo" style="height: 500px">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1']" @select="handleMenuItemClick">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <icon-menu />
              </el-icon>
              商品
            </template>
            <el-menu-item index="1-1">商品列表</el-menu-item>
            <el-menu-item index="1-2">商品分类</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <icon-menu />
              </el-icon>
              用户
            </template>
            <el-menu-item index="2-1">用户列表</el-menu-item>
            <el-menu-item index="2-2">新增用户数量</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <icon-menu />
              </el-icon>
              其他
            </template>
            <el-menu-item index="3-1">日历</el-menu-item>
            <el-menu-item index="3-2">品牌展示</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!-- 内容区域 -->
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-button v-if="activeMenuItem === '1-1'" @click="handleAddProduct">添加商品</el-button>
          <el-button v-if="activeMenuItem === '2-1' && level === 1" @click="handleAddUser">添加用户</el-button>
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">登出</el-dropdown-item>
                <el-dropdown-item @click="self">个人中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span v-if="username">{{ username }}</span>
          <span v-else>Guest</span>
        </div>
      </el-header>

      <el-main>
        <ProductList v-if="activeMenuItem === '1-1'" />
        <CategoryProductCount v-if="activeMenuItem === '1-2'"/>
        <UserList v-if="activeMenuItem === '2-1'" />
        <CategoryUser v-if="activeMenuItem === '2-2'" />
        <Calendar v-if="activeMenuItem === '3-1'" />
        <Picture v-if="activeMenuItem === '3-2'"/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-8);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>